<template>
  <el-container>
    <el-header>
      <el-row style="height: 4vh">
        <el-col :span="8" style="padding-bottom: -5px">
          <el-row>
            <el-col :span="6">
              <router-link
                to="/admin/adminStudents"
                :underline="false"
                active-class="activeClass"
                @click="goTo()"
                ><i
                  class="el-icon-user el-icon--right titSty"
                  style="font-size: 1.2vw"
                >
                  学生信息</i
                ></router-link
              >
            </el-col>

            <el-col :span="5">
              <router-link
                to="/admin/adminCar"
                active-class="activeClass"
                :underline="false"
                @click="goTo()"
                ><i class="el-icon-bank-card" style="font-size: 1.2vw">
                  一卡通</i
                ></router-link
              >
            </el-col>

            <el-col :span="6">
              <router-link
                to="/admin/adminMenu"
                :underline="false"
                active-class="activeClass"
                @click="goTo()"
                ><i class="el-icon-menu" style="font-size: 1.2vw">
                  菜单管理</i
                ></router-link
              >
            </el-col>

            <el-col :span="6">
              <router-link
                to="/admin/adminSelf"
                :underline="false"
                active-class="activeClass"
                @click="goTo()"
                ><i class="el-icon-s-home" style="font-size: 1.2vw">
                  个人中心</i
                ></router-link
              >
            </el-col>
          </el-row>
        </el-col>
        <el-col
          :span="8"
          style="font-weight: 900; font-size: 1.6vw; padding-left: 8%"
          >校园 一 卡通管理平台</el-col
        >
        <el-col :span="8">
          <i
            class="el-icon-user-solid el-icon--right"
            style="font-size: 1.2vw; float: right"
            >{{ adminData.name }}</i
          >
        </el-col>
      </el-row>
      <hr />

      <div>
        <router-view name="adminV"></router-view>
      </div>
    </el-header>
  </el-container>
</template>

<script>
import adminMixin from "../../mixin/adminMixin";
export default {
  name: "adminHeader",
  mixins: [adminMixin],
  data() {
    return {
      adminUserImg: require("../../assets/adminUser.png"),
      activeName: "adminStudents",
      adminId: "",
      adminData: {},
      adminDataUnderline: {
        name: "请登录",
      },
    };
  },

  mounted() {
    // 从本地获取管理员id
    this.adminId = JSON.parse(localStorage.getItem("adminId")) || "";
    // axios通过管理员id获取信息
    this.getAdminDataByid("/admin/queryAdminUserById/", this.adminId);
    this.adminData = this.admin;

    if (Object.keys(this.adminData).length === 0) {
      this.adminData = this.adminDataUnderline;
    }
  },
  watch: {
    admin: function () {
      this.adminData = this.admin;
    },
  },
};
</script>

<style>
.activeClass {
  color: rgb(64, 158, 255);
}
.el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  height: 50px;
  background: #eee;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
}
</style>